<!-- 反馈 -->
<template>
	<view class="boxcss">
		<view class="areabox">
			<textarea v-model="form.concent" class="areabox_area" placeholder-class="placeholdercss"
				placeholder="您的宝贵意见是我们更新的动力～！" :maxlength="maxlength" />
			<view class="areabox_btm">
				{{form.concent.length}}
				<text class="areabox_btm_col">/{{maxlength}}</text>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="xian"></view>
		<view class="phonebox">
			<image src="@/static/user/8.png" class="phonebox_icon"></image>
			<view class="phonebox_h">
				联系方式
			</view>
			<view class="phonebox_t"><input type="text" v-model="form.phone" placeholder="手机号" /></view>
		</view>
		<!-- 底部按钮 -->
		<view class="btnbox" @click="submin()">
			<view class="btnbox_btn">提交反馈</view>
		</view>
	</view>
</template>

<script>
	import * as index from '@/api/index.js'
	export default {
		data() {
			return {
				form: {
					concent: '',
					phone: 17852073282
				},
				maxlength: '300',
				isSubmin: true
			}
		},
		onLoad() {
			
		},
		methods: {
			//提交反馈
			submin() {
				if(!this.form.concent){
					this.$tools.toast('请输入您的反馈内容～')
				}else{
					if(this.isSubmin){
						uni.showLoading({
							title: '提交中～',
							mask: true
						})
						this.throttle(this.addReport(),3000)
					}
				}
			},
			addReport(){
				this.isSubmin = false
				index.feedBack({
					content: this.form.concent
				}).then(res => {
					if(res.code == 1){
						uni.hideLoading()
						this.$tools.toast('反馈成功，我们会第一时间处理！')
						setTimeout(() => {
							uni.navigateBack(-1)
							this.isSubmin = false
						}, 1000)
					}else{
						this.isSubmin = true
					}
				})
			},
			throttle(func, wait) {
				var timeout;
				var previous = 0;
				
				return function() {
					context = this;
					args = arguments;
					if (!timeout) {
						timeout = setTimeout(function() {
							timeout = null;
							func.apply(context, args)
						}, wait)
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.boxcss {
		min-height: calc(100vh - 196rpx);
		padding: 24rpx 0 172rpx;
		background: #fff;
		position: relative;

		::v-deep .placeholdercss {
			color: rgb(201, 201, 201);
			font-size: 32rpx;
			font-weight: 400;
		}

		.areabox {
			border-top: 2rpx solid #f8f8f8;
			padding: 30rpx 30rpx 0;

			&_area {
				width: 100%;
				color: #333;
				height: 402rpx;
			}

			&_btm {
				padding: 10rpx 0 30rpx;
				text-align: right;
				font-size: 24rpx;
				color: #c8c9cc;

				&_col {
					margin-left: 5rpx;
					color: #333;
				}
			}
		}

		.xian {
			height: 12rpx;
			background: rgb(249, 249, 249);
		}

		.phonebox {
			padding: 32rpx 30rpx;
			display: flex;
			align-items: center;

			&_icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			&_h {
				color: rgb(51, 51, 51);
				font-size: 32rpx;
				font-weight: 500;
				margin-right: 61rpx;
			}

			&_t {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
			}
		}

		.btnbox {
			width: calc(100vw - 48rpx);
			height: 140rpx;
			padding: 16rpx 24rpx;
			background: rgb(255, 255, 255);
			position: fixed;
			bottom: 0;
			left: 0;

			&_btn {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 49rpx;
				background: #4E94F6;
				color: rgb(255, 255, 255);
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>